<template>
	<view>
		<view class="search-box">
			<my-search @click="gotoSearch"></my-search>
		</view>
		<view class="scroll-view-container">
			<view class="left-scroll-view">
				<scroll-view scroll-y="true" :style="{height: wh + 'px'}" enhanced="true" show-scrollbar="false">
					<block v-for="(item,index) in classifyList" :key="index">
						<view :class="['left-child-element',index === active? 'active' : '']"
							@click="changeSelect(index)">{{item.cat_name}}</view>
					</block>
				</scroll-view>
			</view>
			<view class="right-scroll-view">
				<scroll-view scroll-y="true" :style="{height: wh + 'px'}" :scroll-top="this.scrollTop">
					<view clas="right-child-element" v-for="(item2,index2) in classifyList2" :key="index2">
						<view class="right-child-element-title">/{{item2.cat_name}}/</view>
						<view class="right-child-list">
							<view class="right-child-item" v-for="(item3,index3) in item2.children" :key="index3"
								@click="gotoGoodsList(item3)">
								<image :src="item3.cat_icon" mode=""></image>
								<text>{{item3.cat_name}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import badgeMix from '@/mixins/tabbar-badge.js'
	export default {
		mixins: [badgeMix],
		data() {
			return {
				// 当前设备滚动可用高度，注意用100vh在h5中会出现两侧同时滚动的bug
				wh: 0,
				classifyList: [],
				active: 0,
				classifyList2: [],
				scrollTop: 0
			};
		},
		onLoad() {
			this.getClassifyList()
			const sysInfo = uni.getSystemInfoSync()
			console.log('1.设备信息', sysInfo);
			this.wh = sysInfo.windowHeight
		},
		methods: {
			gotoSearch() {
				uni.navigateTo({
					url: '../../subpkg/search/search'
				})
			},
			// 获取分类列表信息
			async getClassifyList() {
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/categories')
				if (res.meta.status !== 200) {
					uni.$showMsg()
				} else {
					console.log('2.分类列表数据', res.message)
					this.classifyList = res.message
					this.classifyList2 = res.message[0].children
					console.log('3.二级数据', this.classifyList2)
				}
			},
			changeSelect(i) {
				this.active = i
				this.classifyList2 = this.classifyList[i].children
				// 当切换时scrollTop没发生变化就不会进行高度重置，所以可以利用1和0进行重置（0-1px用户感觉不出来）但又会出现新bug重复点击会出现抖动的问题，设置更小的值解决
				this.scrollTop = this.scrollTop === 0 ? .1 : 0
			},
			gotoGoodsList(item3) {
				console.log(item3);
				uni.navigateTo({
					url: '/subpkg/goods_list/goods_list?cid=' + item3.cat_id
				})
			}
		}
	}
</script>

<style lang="scss">
	.search-box {
		position: sticky;
		top: 0px;
		z-index: 9;
	}

	.scroll-view-container {
		display: flex;

		.left-scroll-view {
			width: 25vw;

			// 解决官方滚动条在ios设备下不能隐藏的bug
			::-webkit-scrollbar {
				width: 0;
				height: 0;
				color: transparent;
			}

			.left-child-element {
				background-color: #f7f7f7;
				text-align: center;
				font-weight: bold;
				color: #333333;
				font-size: 26rpx;
				line-height: 100rpx;
				position: relative;

				&.active {
					color: #ffb907;
					transition: .5s;

					&::before {
						display: block;
						content: '';
						background-color: #ffb907;
						width: 5rpx;
						height: 80rpx;
						position: absolute;
						top: calc(50% - 40rpx);
					}
				}
			}
		}


		.right-scroll-view {
			width: 75vw;
			border-left: #c3c3c3 1px solid;

			.right-child-element-title {
				text-align: center;
				padding: 15rpx 0;
				font-size: 28rpx;
				color: #444444;
				font-weight: 500;
			}

			.right-child-list {
				display: flex;
				flex-wrap: wrap;

				.right-child-item {
					padding: 5rpx 0;
					width: 33%;

					// outline: #ffb907 1px solid;
					image {
						height: 60px;
						width: 60px;
						display: block;
						margin: 0 auto;
						border-radius: 10px;
					}

					text {
						display: block;
						text-align: center;
						font-size: 12px;
					}
				}
			}
		}
	}
</style>
